<template>
	<view class="container">
		<!-- 蓝色头部区域 -->
		<view class="blue-header">
			<view class="navbar">
				<view class="back-btn" @click="onBack">
					<uni-icons type="left" size="24" color="#ffffff"></uni-icons>
				</view>
				<view class="title">经营统计</view>
			</view>
		</view>

		<view class="white-content">
			
			<view class="order-info">
				<view class="tab-group">
					<button class="tab-btn" :class="{ 'active': currentTab === 'today' }" @click="currentTab = 'today'">
						今日
					</button>
					<button class="tab-btn" :class="{ 'active': currentTab === 'yesterday' }"
						@click="currentTab = 'yesterday'">
						昨天
					</button>
					<view class="tab-my">
						<image style="width: 30rpx;" src="/static/index-top/预约挂号@2x.png" mode="widthFix"></image>
						<text style="font-size: 15rpx;">自定义</text>
					</view>
				</view>
				<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
				
				<view class="card">
					<view class="center-card">
						<image class="card-icon" src="/static/icon/income.png" mode="widthFix"></image>
						<text class="card-value">¥2066.56</text>
						<text class="card-label">收入</text>
					</view>
					<view class="center-card">
						<image class="card-icon" src="/static/icon/order.png" mode="widthFix"></image>
						<text class="card-value">53</text>
						<text class="card-label">订单量</text>
					</view>
				</view>
			</view>
			
			<!-- 收入分布环形图（修改为图片样式） -->
			<view class="order-info">
				<view class="">收入分布</view>
				<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
				
				<view class="section">
					 <view class="charts-box">
					    <qiun-data-charts 
					      type="ring"
					      :opts="opts"
					      :chartData="chartData"
					    />
					  </view>
				
					</view>
					</view>
			

			<!-- 订单趋势柱状图 -->
			<view class="order-info">
				<view class="">订单分布</view>
				<view style="height: 7rpx;background-color: gainsboro; width: 90%;margin: 5rpx auto"></view>
				
				<view class="chart-container">
					<qiun-data-charts
						type="column"
						:opts="barOpts"
						:chartData="barData"
						canvasId="orderBar"
						width="10%"
						height="300rpx"
					/>
				</view>
				
			
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 环形图数据（收入分布）
				chartData: {
					series: [
						{ name: "洗车", data: 500,"labelText":"洗车:500元" },
						{ name: "保养", data: 1566.56,"labelText":"保养:1566.56元" }
					]
				},
				
opts: {
        rotate: false,
        rotateLock: false,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "right",
          lineHeight: 20
        },
        title: {
          name: "",
          
          color: "#666666"
        },
        subtitle: {
          name: "",
          fontSize: 25,
          color: "#7cb5ec"
        },
        extra: {
          ring: {
            ringWidth: 20,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 50,
			
            labelWidth: 1,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
				// 环形图自定义图例
				ringLegend: [
					{ name: "洗车", rate: 26 },
					{ name: "保养", rate: 74 }
				],
				
				// 柱状图数据（订单分布）
				barData: {
					categories: ["维修", "保养", "洗车"],
					series: [
						{ name: "订单量", data: [300, 170, 346] }
					]
				},
				// 柱状图配置
				barOpts: {
				  color: ["#7B68EE", "#48D1CC", "#FFD700"],
				  legend: {
				    show: true,
				    position: "bottom"
				  },
				  xAxis: { show: true },
				  yAxis: { show: true, min: 0 }
				},
				// 柱状图自定义图例
				barLegend: [
					{ name: "维修", value: "300单" },
					{ name: "保养", value: "170单" },
					{ name: "洗车", value: "346单" }
				],

				currentTab: 'today',
				activeTime: 'today',
				// 其他统计数据
				totalIncome: 5862.50,
				totalOrders: 126,
				totalCustomers: 89,
				incomeChange: 12.5,
				orderChange: 8.3,
				customerChange: -2.1
			};
		},
		onLoad() {
			this.fetchStatisticsData();
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			handleTimeChange(e) {
				const timeType = e.detail.value;
				this.activeTime = timeType;
				this.fetchStatisticsData(timeType);
			},
			showDatePicker() {
				uni.showModal({
					title: '提示',
					content: '自定义日期功能待实现',
					showCancel: false
				});
			},
			fetchStatisticsData(timeType = 'today') {
				const dataMap = {
					today: {
						income: 5862.50,
						orders: 126,
						customers: 89,
						incomeChange: 12.5,
						orderChange: 8.3,
						customerChange: -2.1
					},
					yesterday: {
						income: 5120.30,
						orders: 115,
						customers: 82,
						incomeChange: 5.2,
						orderChange: 3.8,
						customerChange: 1.2
					},
					week: {
						income: 32560.80,
						orders: 680,
						customers: 452,
						incomeChange: 8.7,
						orderChange: 6.5,
						customerChange: 4.3
					},
					month: {
						income: 128650.20,
						orders: 2560,
						customers: 1680,
						incomeChange: 15.3,
						orderChange: 12.1,
						customerChange: 9.8
					}
				};
				const data = dataMap[timeType];
				this.totalIncome = data.income;
				this.totalOrders = data.orders;
				this.totalCustomers = data.customers;
				this.incomeChange = data.incomeChange;
				this.orderChange = data.orderChange;
				this.customerChange = data.customerChange;
			}
		}
	};
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: rgb(245, 245, 245);
		display: flex;
		flex-direction: column;
	}

	.navbar {
		display: flex;
		align-items: center;
		padding: 2rpx 2rpx;
		position: relative;
	}

	.title {
		font-size: 38rpx;
		font-weight: 400;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.blue-header {
		position: relative;
		background-color: #007AFF;
		color: white;
		padding-bottom: 150rpx;
	}

	.white-content {
		position: relative;
		z-index: 10;
		width: 85%;
		background-color: #f5f5f5;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-left: 35rpx;
		margin-top: -100rpx;
		padding: 20rpx 0;
	}

	/* 共用样式 */
	.order-info {
		position: relative;
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.2s;
		margin-bottom: 30rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	/* 时间筛选 */
	.tab-group {
		position: relative;
		display: flex;
		justify-content: center; 
		padding: 0; 
		margin: 10rpx 0; 
	}

	.tab-btn {
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: rgb(242,242,242);
		color: #007AFF;
		font-size: 28rpx;
		padding: 0;
		margin: 0;
	}

	.tab-btn:first-child {
		border-top-left-radius: 40rpx; 
		border-bottom-left-radius: 40rpx; 
		border-right: none; 
	}

	.tab-btn:last-child {
		border-top-right-radius: 40rpx; 
		border-bottom-right-radius: 40rpx; 
		border-left: none; 
	}

	.tab-btn.active {
		background-color: #007AFF;
		color: #fff;
	}
	
	.tab-my {
		display: flex;
		position: absolute;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		padding: 10rpx;
		left: 430rpx;
	}

	.tab-my image {
		margin-right: 8rpx;
	}

	/* 数据卡片 */
	.card{
		display: flex;
	}

	.center-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		width: 45%;
	}

	.card-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 12rpx;
	}

	.card-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.card-label {
		font-size: 24rpx;
		color: #999;
	}

	/* 图表样式 */
	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	/* 关键修改：环形图容器相对定位，用于放置自定义标签 */
	.chart-container {
		width: 100%;
		height: 300rpx;
		margin-bottom: 20rpx;
	}
	
	.relative {
		position: relative;
	}
	
	/* 自定义标签样式（显示洗车和保养金额） */
	.custom-label {
		position: absolute;
		color: #333;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
	}
	
	.custom-label .amount {
		font-weight: bold;
		margin-top: 5rpx;
	}
	
	/* 洗车标签位置 */
	.wash-car {
		top: 60rpx;
		right: 80rpx;
	}
	
	/* 保养标签位置 */
	.maintenance {
		bottom: 60rpx;
		left: 80rpx;
	}

	/* 图例样式 */
	.legend {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
		justify-content: center; /* 图例居中 */
	}
	
	.legend-item {
		display: flex;
		align-items: center;
		margin-right: 30rpx; /* 增加间距 */
		margin-bottom: 10rpx;
		font-size: 26rpx;
	}
	
	.legend-color {
		width: 20rpx;
		height: 20rpx;
		border-radius: 4rpx;
		margin-right: 10rpx;
	}
	.charts-box{
		position: relative;
		left: -73rpx;
	}
</style>
